import React, {Component} from 'react';
import {Button, Select, Space} from "antd";
import {connect} from "react-redux";
import {decreaseFun, incrementFun} from "../reduce/actions/count_action";

class CalculateCon extends Component {
    state={value:3}

    andleChange=(e)=>{
     this.setState({value:e})
    }

    incrementClick=()=>{
      const{value}=this.state
        console.log(this.props,'>>>>>')
        this.props.incre(value)
    }
    decreaseClick=()=>{
        const{value}=this.state
        this.props.decr(value)
    }
    render() {
        const {count,inputValue}=this.props
        console.log(count)
        return (
            <div>
                <h2>CalculateCon组件</h2>
                <h4>计算结果：{count}</h4>
                <h4>inputValue:{inputValue}</h4>
                <Space>
                <Select
                    defaultValue="1"
                    onChange={e=>this.andleChange(e)}
                    style={{ width: 120 }}
                    options={[
                        { value: 1, label: '1' },
                        { value: 2, label: '2' },
                        { value: 3, label: '3' },
                    ]}
                />
                <Button type='primary' onClick={this.incrementClick}>+</Button><Button type='primary' onClick={this.decreaseClick}>-</Button>
                </Space>
            </div>
        );
    }
}

export default connect(
    state=>({
        count:state.count,
        inputValue:state.inputValue,
    }),
    {
        incre:incrementFun,
        decr:decreaseFun
    }
)(CalculateCon)
